<template>
  <div class="dog-list">
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <h2 class="page-title">狗狗品种大全</h2>
        <p class="page-subtitle">
          选择你心仪的狗狗品种
          <span v-if="dogs.length > 0" class="breed-count">（共 {{ dogs.length }} 个品种）</span>
        </p>
      </div>
      <div class="toolbar-right">
        <!-- 场景配置按钮 -->
        <el-button
          type="primary"
          icon="el-icon-setting"
          @click="goToSceneConfig"
          class="scene-config-btn">
          场景配置
        </el-button>
      </div>
    </div>

    <!-- 狗狗列表 -->
    <div class="dog-cards">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <el-loading-text>正在加载品种数据...</el-loading-text>
      </div>

      <!-- 空数据状态 -->
      <div v-else-if="dogs.length === 0" class="empty-container">
        <el-empty description="暂无品种数据">
          <el-button type="primary" @click="loadDogs">重新加载</el-button>
        </el-empty>
      </div>

      <!-- 数据列表 -->
      <div v-else class="cards-grid">
        <div class="dog-card" v-for="dog in dogs" :key="dog.id" @click="viewDetails(dog)">
          <div class="card-image">
            <img :src="dog.standingUrl" :alt="dog.breed" class="main-image" />
            <div class="breed-badge">{{ dog.distributionArea }}</div>
          </div>

          <div class="card-content">
            <h3 class="breed-name">{{ dog.breed }}</h3>
            <p class="breed-characteristics">{{ dog.characteristics }}</p>

            <div class="breed-info">
              <div class="info-item">
                <i class="el-icon-location-outline"></i>
                <span class="info-text">{{ dog.distributionArea }}</span>
              </div>
            </div>

            <div class="card-actions">
              <el-button size="mini" type="primary" @click.stop="selectBreed(dog)">
                选择此品种
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: 'DogList',
  data() {
    return {
      dogs: [],
      loading: false
    }
  },
  mounted() {
    this.loadDogs()
  },
  methods: {
    async loadDogs() {
      this.loading = true
      try {
        // 使用不分页的API获取所有品种列表
        const result = await this.$parent.loadBreedsData()
        if (result.success) {
          // 使用图片URL转换工具处理数据
          this.dogs = this.$transformArrayImageUrls(result.data || [], ['standingUrl'])
        } else {
          this.$message.error(result.message || '获取数据失败')
          this.dogs = []
        }
      } catch (error) {
        this.$message.error('获取数据失败：' + error.message)
        this.dogs = []
      } finally {
        this.loading = false
      }
    },


    viewDetails(dog) {
      this.$router.push({ name: 'DogDetail', params: { id: dog.id } })
    },
    selectBreed(dog) {
      // 选择品种的逻辑
      this.$message.success(`已选择 ${dog.breed}`)
      // 可以在这里添加选择品种后的逻辑，比如跳转到领养页面
      this.$emit('select-breed', dog)
    },

    goToSceneConfig() {
      this.$router.push('/scene-config')
    }
  }
}
</script>

<style scoped>
.dog-list {
  padding: 24px;
  background: #f8fafc;
  min-height: 100vh;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.toolbar-left {
  flex: 1;
}

.page-title {
  margin: 0 0 5px 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

.page-subtitle {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

.breed-count {
  color: #10b981;
  font-weight: 500;
  margin-left: 8px;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scene-config-btn {
  font-size: 14px;
  padding: 10px 20px;
}

.dog-cards {
  margin-bottom: 40px;
}

.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  text-align: center;
}

.loading-container {
  font-size: 16px;
  color: #606266;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 0 20px;
}

@media (max-width: 1400px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
  }
}

@media (max-width: 1200px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 12px;
  }
}

.dog-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 350px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.dog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-image {
  position: relative;
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
}

.main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.dog-card:hover .main-image {
  transform: scale(1.05);
}

.breed-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 500;
  backdrop-filter: blur(10px);
}

.card-content {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.breed-name {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breed-characteristics {
  margin: 0 0 12px 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 34px;
}

.breed-info {
  margin-bottom: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.info-item i {
  color: #9ca3af;
  font-size: 14px;
}

.info-text {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.card-actions {
  margin-top: auto;
  padding-top: 8px;
}

.card-actions .el-button {
  width: 100%;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
}






/* 响应式设计 */
@media (max-width: 768px) {
  .dog-list {
    padding: 16px;
  }

  .toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
  }

  .toolbar-right {
    width: 100%;
    justify-content: center;
  }

  .page-title {
    font-size: 20px;
  }

  .page-subtitle {
    font-size: 13px;
  }

  .dog-card {
    height: auto;
    min-height: 280px;
  }

  .card-image {
    height: 160px;
  }

  .breed-name {
    font-size: 16px;
  }
}
</style>
